<!DOCTYPE html>
<html>
<head>
	<title>SelectPage使用文档</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
	<link rel="stylesheet" href="../css/header.css" />
	<link rel="stylesheet" href="../css/docs.css" />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-4688926342467996",
    enable_page_level_ads: true
  });
</script>
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.oschina.io/selectpage/index.html" class="navbar-brand">SelectPage</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="guide.html" >入门</a>
                </li>
                <li>
                    <a href="demo.html" >实例</a>
                </li>
                <li class="active">
                    <a href="javascript:void(0);" >文档</a>
                </li>
                <li>
                    <a href="changelog.html" >更新记录</a>
                </li>
                <li>
                    <a href="message.html" >留言/反馈</a>
                </li>
                <li>
                    <a href="https://terryz.oschina.io" >Home</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/SelectPage" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>


    <div class="content">
        <div class="container">
			<div class="row">
				<div class="col-md-3">
					<div class="navBox">
					<ul class="nav" id="nav">
						<li class="current"><a href="#data">* data</a></li>
						<li><a href="#showField">* showField</a></li>
						<li><a href="#keyField">* keyField</a></li>
						<li><a href="#lang">lang</a></li>
						<li><a href="#searchField">searchField</a></li>
						<li><a href="#multiple">multiple</a></li>
						<li><a href="#pagination">pagination</a></li>
						<li><a href="#listSize">listSize</a></li>
						<li><a href="#multipleControlbar">multipleControlbar</a></li>
						<li><a href="#maxSelectLimit">maxSelectLimit</a></li>
						<li><a href="#selectToCloseList">selectToCloseList</a></li>
						<li><a href="#focusDropList">focusDropList</a></li>
						<li><a href="#autoSelectFirst">autoSelectFirst</a></li>
						<li><a href="#autoFillResult">autoFillResult</a></li>
						<li><a href="#noResultClean">noResultClean</a></li>
						<li><a href="#formatItem">formatItem</a></li>
						<li><a href="#andOr">andOr</a></li>
						<li><a href="#orderBy">orderBy</a></li>
						<li><a href="#pageSize">pageSize</a></li>
						<li><a href="#inputDelay">inputDelay</a></li>
						<li><a href="#params">params</a></li>
						<li><a href="#eAjaxSuccess">eAjaxSuccess</a></li>
						<li><a href="#eSelect">eSelect</a></li>
						<li><a href="#eTagRemove">eTagRemove</a></li>
                        <li><a href="#eClear">eClear</a></li>
						<li><a href="#selectPageClear">$.fn.selectPageClear</a></li>
						<li><a href="#selectPageRefresh">$.fn.selectPageRefresh</a></li>
						<li><a href="#selectPageData">$.fn.selectPageData</a></li>
						<li><a href="#selectPageText">$.fn.selectPageText</a></li>
					</ul>
					</div>
				</div>
				<div class="col-md-9 propertiesBox">
					<div class="row" id="data">
						<h3>data <small>插件列表的数据源</small></h3>
						<ul>
							<li><strong>类型：</strong><code>object | string</code></li>
							<li><strong>默认值：</strong><code>无默认值，该参数为必填参数</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
									<p>数据源可以是json数据格式或URL</p>
									<strong>json数据格式</strong><br>
									<code>[{id:1,name:'张三',sex:'男'},{id:2,name:'李四',sex:'男'}]</code>
									<p>如上所例数据，showField可设置为name或sex，keyField可设置为id</p>
									
									<strong>url</strong><br>
									<code>http://xxx.com/load</code>
									<p>使用URL执行ajax读取服务端数据，返回数据格式与上述json数据格式一致</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="showField">
						<h3>showField <small>显示在列表中的数据字段</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'name'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置的值为data数据源中的数据字段名
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="keyField">
						<h3>keyField <small>数据代码列</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'id'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置的值为data数据源中的数据字段名
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="lang">
						<h3>lang <small>插件语言，默认为'cn'简体中文</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'cn'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								可设置的语言
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>代码</th>
											<th>语言</th>
											<th>描述</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>de</td>
											<td>German</td>
											<td>德语</td>
										</tr>
										<tr>
											<td>en</td>
											<td>English</td>
											<td>英文</td>
										</tr>
										<tr>
											<td>cn</td>
											<td>Chinese</td>
											<td>中文</td>
										</tr>
										<tr>
											<td>es</td>
											<td>Spanish</td>
											<td>西班牙语</td>
										</tr>
										<tr>
											<td>pt-br</td>
											<td>Brazilian Portuguese</td>
											<td>巴西葡萄牙语</td>
										</tr>
										<tr>
											<td>ja</td>
											<td>Japanese</td>
											<td>日语</td>
										</tr>
									</tbody>
								</table>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="searchField">
						<h3>searchField <small>查询关键字字段</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								查询字段，仅为使用URL(ajax)方式查询服务端时，设置后端查询的字段，不设置则默认使用showField设置的字段
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="multiple">
						<h3>multiple <small>多选模式</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>false</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置插件选择模式，默认为单选模式
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="pagination">
						<h3>pagination <small>是否分页</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>设置插件是否打开分页模式，默认打开分页模式</p>
								<p>关闭分页后，将会在列表中显示所有数据，上限为200个项目，同时分页栏也不再显示</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="listSize">
						<h3>listSize <small>关闭分页的状态下，列表显示的项目个数，其它的项目以滚动条滚动方式展现</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>10</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>设置关闭分页模式时，列表的高度以显示多少个项目为准</p>								
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="multipleControlbar">
						<h3>multipleControlbar <small>是否启用多选模式的控制按钮区域，仅multiple: true模式下可用</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置插件是否启用多选模式的控制按钮区域，仅multiple: true模式下可用
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="maxSelectLimit">
						<h3>maxSelectLimit <small>多选模式下最大选择个数，0为不限制</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>0</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置插件最多可以选择的项目，仅multiple: true模式下可用
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectToCloseList">
						<h3>selectToCloseList <small>选中项目后关闭列表</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置在选中项目后，关闭列表，仅multiple: true模式下可用
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="focusDropList">
						<h3>focusDropList <small>是否在输入框获得焦点时，展开下拉窗口</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置当输入框获得焦点时，是否展开数据列表
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="autoSelectFirst">
						<h3>autoSelectFirst <small>是否自动选择列表中的第一项内容</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								是否自动选择列表中的第一项内容(输入关键字查询模式，直接使用鼠标下拉并不触发)
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="autoFillResult">
						<h3>autoFillResult <small>是否自动填充内容</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								若有列表项目被高亮显示，在焦点离开控件后，自动设置该项为选中内容
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="noResultClean">
						<h3>noResultClean <small>是否清空输入关键字</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								在输入框中输入内容进行查询，但没有匹配的内容返回，在焦点离开控件后，自动清空输入框输入的内容
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="formatItem">
						<h3>formatItem <small>列表项目显示内容格式化</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数1：data，行数据object格式
								返回：string
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="andOr">
						<h3>andOr <small>查询方式 ('AND' or 'OR')</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'AND'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">								
								<p>andOr : 'OR'</p>
								<p>参数指定了插件在使用多关键字过滤时，处理的逻辑，多关键字之间使用半角空格隔开</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="orderBy">
						<h3>orderBy <small>数据排序方式</small></h3>
						<ul>
							<li><strong>类型：</strong><code>array</code></li>
							<li><strong>默认值：</strong><code>使用showField指定的列进行升序排列</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>orderBy : ['id desc','name']</p>
								<p>若只指定了列，而不指定排序方式，则默认使用Asc升序排列，列和排序方式之间使用半角空格隔开</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="pageSize">
						<h3>pageSize <small>每页显示记录数</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>10</code></li>
						</ul>
					</div>
					<div class="row" id="inputDelay">
						<h3>inputDelay <small>输入关键字查询延迟（仅ajax数据源模式下可用）</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>0.5</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>该参数指定了在ajax数据源模式下，延迟输入查询的时间，避免在单位时间内连续输入发起的连续ajax查询，单位：秒，默认值：0.5</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="params">
						<h3>params <small>查询参数</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>使用URL进行AJAX查询时，可传递查询参数</p>
								<p>返回结果格式：<code>{'name':'aa','sex':1}</code></p>
								<p>例如：<code>params : function(){return {'name':'aa','sex':1};}</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="eAjaxSuccess">
						<h3>eAjaxSuccess <small>ajax请求模式，请求成功后的数据处理回调</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数：data：ajax服务端返回的json数据
								<p><code>eAjaxSuccess : function(data){ return data.pageinfo; }</code></p>
								返回的数据格式：
								<p><xmp>
{
	list : [{name:'aa',sex:1},{name:'bb',sex:1}...],
	totalRow : 100
}
								</xmp></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="eSelect">
						<h3>eSelect <small>事件回调，响应项目被选中后的事件处理</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数：data：选中行的原始JSON数据
								<p><code>eSelect : function(data){ $('xxx').val(data.name + data.sex); }</code></p>
								</div>
							</li>
						</ul>
					</div>
                    <div class="row" id="eTagRemove">
                        <h3>eTagRemove <small>事件回调，多选模式下，关闭标签是的回调函数</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>function</code></li>
                            <li><strong>默认值：</strong><code>无</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    参数：removeCount：被移除标签的个数
                                    <p><code>eTagRemove : function(removeCount){}</code></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" id="eClear">
                        <h3>eClear <small>单选模式下，清除按钮的功能回调</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>function</code></li>
                            <li><strong>默认值：</strong><code>无</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p><code>eClear : function(){}</code></p>
                                </div>
                            </li>
                        </ul>
                    </div>
					<div class="row" id="selectPageClear">
						<h3>$.fn.selectPageClear <small>清除所有模式下选择的项目</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p><code>$('#selectPage').selectPageClear();</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectPageRefresh">
						<h3>$.fn.selectPageRefresh <small>刷新选中项目内容</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								使用场景：使用$().val('xxx')修改插件的选中项目ID，此时需要刷新插件在输入框中的显示文本
								<p>
								$('#selectPage').val('5');<br> 
								$('#selectPage').selectPageRefresh();
								</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectPageData">
						<h3>$.fn.selectPageData <small>动态修改插件数据源</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数：data：新数据源
								<p>
								var data = [{name:'aa',sex:1},{name:'bb',sex:0},{...}];
								$('#selectPage').selectPageData(data);
								</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectPageText">
						<h3>$.fn.selectPageText <small>获得选中项目的文本</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p><code>alert($('#selectPage').selectPageText());</code></p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
        </div>
    </div>






<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/nav/jquery.nav.js" ></script>
<script type="text/javascript" src="../lib/stickUp/stickUp.min.js" ></script>
<script type="text/javascript" src="../js/docs.js" ></script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>